一起來實作響應式網頁設計：代辦清單實作 Day27

2023 iThome 鐵人賽

DAY 27

影片教學

一起來實作響應式網頁設計系列第 27 篇

15th鐵人賽 js javascript

Ericostco

2023-10-12 23:52:45

284 瀏覽

分享至

影片教學

程式碼回顧

html

<body>
    <div id = "title">
        <h2>代辦事項清單</h2>
    </div>

    <div>
        <input type="text" id = "list_input" placeholder = "例如：買早餐">
        <button id = "button_submit" onclick="createItem()" > Create </button>
    </div>

    <div id = "show_list">
        <ul id = "to_do_list"></ul>
    </div>

    <div id = "delete_list">
        <button onclick="deleteList()" id="button_delete"> Delete All Item </button>
    </div>

    <script src="index.js"></script>
</body>

js

function createItem() {
    let input_text = document.querySelector("#list_input").value;
    document.querySelector("#to_do_list").innerHTML += "<li class = 'item'>"
     + input_text + "<button class = 'button_delete_item'></button>" + "</li>";
}

function deleteList() {
    let delete_all = document.querySelector("#to_do_list");
    console.log(delete_all.firstChild)
    while(delete_all.firstChild){
        delete_all.removeChild(delete_all.firstChild);
    }
}